<template>
	<uni-popup type="bottom" ref="reward">
		<view class="reward">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">金币</text>
				<text class="title-btn" @click="jumpRecord">明细</text>
			</div>
			<div class="score-box">
				<text class="score">{{coin}}</text>

			</div>
			<div class="desc-box">
				<div class="label">获取：</div>
				<div class="value">测试期间，初始十个</div>
			</div>
			<div class="desc-box">
				<div class="label">消耗：</div>
				<div>
					<div class="value">1.每次创建或加入房间消耗一枚金币，加入VIP房间不需要消耗金币</div>
					<div class="value">2.观看别人的房间需要消耗一枚金币</div>
					<div class="value">3.VIP加入创建都不需要消耗金币,测试期间只要创建房间并邀请同伴加入房间即可获取VIP</div>
				</div>

			</div>
			<!-- <view class="contact-btn" @click="checkIn">签到</view> -->
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "RewardPopup",
		data() {
			return {

			};
		},
		props: {
			coin: Number
		},
		methods: {
			open() {
				this.$refs.reward.open()
			},
			close() {
				this.$refs.reward.close()
			},
			jumpRecord() {
				this.$emit("show")

				// uni.navigateTo({
				// 	url:"/pages/RewardRecord/RewardRecord"
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	.reward::after {
		display: table;
		content: "";
		clear: both;
	}

	.reward {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 12px;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

			.title-btn {
				color: $uni-color-primary;
				padding: 8upx 16upx;
				width: 80upx;

				position: absolute;
				right: 24upx;

			}

		}

		.score-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40upx;
			margin-bottom: 40upx;

			.score {
				font-size: 80upx;
				font-weight: 700;
				padding-right: 8upx;
				text-align: center
			}

		}

		.desc-box {
			display: flex;
			margin-left: 60upx;
			margin-right: 60upx;
			margin-bottom: 24upx;

			.label {
				flex-shrink: 0;
				font-size: 30upx;
			}

			.value {
				flex-grow: 1;
				font-size: 30upx;
			}

		}

		.tip {
			display: flex;
			justify-content: center;
			color: #00000050;
			margin-top: 20upx;
			text-align: center;
			margin-bottom: 40upx;
		}

		.contact-btn {
			font-size: 34upx;
			height: 80upx;
			line-height: 80upx;
			margin: 40upx auto;
			width: 96%;
			background-color: $uni-color-primary;
			color: white;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>